<template>
	<view class="container">
		<!-- 头部导航栏 -->
		<view class="header">
			<view class="nav-back" @click="goBack">
				<uv-icon name="arrow-left" size='32'></uv-icon>
			</view>
			<text class="header-title">斗罗大陆</text>
		</view>

		<!-- 评分区 -->
		<view class="header-rate">
			<view class="header-rate-left">
				<view>
					<text style="font-size: 24px;">8.9</text>
					<text>分</text>
				</view>
				<text>100人点评</text>
			</view>
			<view class="header-rate-right">
				<uv-rate active-color="#f0b543" inactive-color="#b2b2b2" gutter="5" size="21"></uv-rate>
				<text>轻按星星点评此书</text>
			</view>
		</view>

		<!-- 书评区块 -->
		<view class="reviews">
			<view class="header-reviews">
				<view class="header-title">
					<text class="title">书评</text>
					<text class="count">({{ book.commentCount }}条)</text>
				</view>
				<uv-button size="mini" custom-style="border-radius: 10px;
				color: #fff;
				background-color: #f59a23;" @click="open()">
					写书评
				</uv-button>
			</view>

			<!-- 书评列表 -->
			<view class="comment-list">
				<view v-for="(comment, index) in book.comments" :key="index" class="comment-item">
					<image :src="comment.avatar" class="avatar" />
					<view class="content">
						<view class="user">
							<view class="user-rate">
								<text class="name">{{ comment.username }}</text>
								<uv-rate :value="comment.rating" disabled size="14" />
							</view>
							<view class="user-more">
								<uv-icon name="more-dot-fill"></uv-icon>
							</view>
						</view>

						<view class="text">{{ comment.content }}</view>
						<view class="footer">
							<text class="time">{{ comment.time }}</text>
							<view class="actions">
								<view class="action">
									<uv-icon name="chat" size="14" />
									<text>{{ comment.replyCount }}</text>
								</view>
								<view class="action">
									<uv-icon name="thumb-up" size="14" />
									<text>{{ comment.likeCount }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 写书评弹窗 -->
		<view class="reviews-popup">
			<uv-popup ref="popup" mode="bottom" closeable="true" closeIconPos="top-left">
				<view class="popup-header">
					<text>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</text>
					<text>点评此书</text>
					<text>发表</text>
				</view>
				<view class="popup-rate">
					<uv-rate active-color="#f0b543" inactive-color="#b2b2b2" gutter="5" size="21"></uv-rate>
					<text>好看</text>
				</view>
				<view class="popup-textarea">
				    <textarea 
				      ref="textarea"
				      v-model="commentContent"
				      placeholder="发表您的看法"
				      :focus="autoFocus"
				      :show-confirm-bar="false"
				      :adjust-position="false"
				      class="custom-textarea"
				      @focus="handleFocus"
				    />
				  </view>

			</uv-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				book: {
					cover: '/static/images/bases/baseimg.png',
					title: '斗罗大陆',
					author: '唐家三少',
					detail: '唐门外门弟子唐三，因偷学内门绝学为唐门所不容， 跳崖明志时却',
					category: '玄幻',
					wordCount: 3.8,
					tags: ['重生', '玄幻', '异能'],
					score: 9.0,
					reviewCount: 6.6,
					readingCount: 3.8,
					// 评论样式
					commentCount: 221,
					comments: [{
							avatar: '/static/images/bases/baseimg.png',
							username: '书友_938383737',
							rating: 5,
							content: '很好看的书籍，值得观看',
							time: '2021-09-09 12:09',
							replyCount: 221,
							likeCount: 221
						},
						{
							avatar: '/static/images/bases/baseimg.png',
							username: '书友_938383737',
							rating: 3,
							content: '很好看的书籍，值得观看',
							time: '2021-09-09 12:09',
							replyCount: 221,
							likeCount: 221
						},
						{
							avatar: '/static/images/bases/baseimg.png',
							username: '书友_938383737',
							rating: 2,
							content: '很好看的书籍，值得观看',
							time: '2021-09-09 12:09',
							replyCount: 221,
							likeCount: 221
						}
					]
				},
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			open() {
				this.$refs.popup.open();
				 setTimeout(() => {
				      this.$refs.textarea.focus()
				    }, 300)
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		background-color: #f6f8fa;
	}

	/* 头部导航栏样式 */
	.header {
		display: flex;
		align-items: center;
		padding: 24rpx 32rpx;
		background: #fff;

		.header-title {
			flex: 1;
			text-align: center;
			font-size: 36rpx;
			color: #333;
		}
	}

	// 评分区
	.header-rate {
		width: 100%;
		height: 80px;
		background-color: #fff;
		display: flex;
		justify-content: space-around;
		margin-bottom: 20rpx;

		.header-rate-left {
			display: flex;
			flex-direction: column;
			justify-content: center;

			text {
				font-size: 14px;
			}
		}

		.header-rate-right {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			justify-content: center;

			text {
				font-size: 12px;
				margin-top: 20rpx;
			}
		}
	}

	/* 书评区块 */
	.reviews {
		padding: 0 32rpx;
		background-color: #fff;

		.header-reviews {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 32rpx;
			padding-top: 20rpx;

			.title {
				font-weight: bold;
				margin-right: 16rpx;
			}

			.count {
				color: #999;
				margin-right: 24rpx;
			}
		}

		.comment-item {
			display: flex;
			padding-bottom: 20rpx;

			.avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-right: 24rpx;
			}

			.content {
				flex: 1;

				.user {
					display: flex;
					align-items: center;
					margin-bottom: 16rpx;
					justify-content: space-between;

					.user-rate {

						.name {
							margin-right: 16rpx;
						}
					}
				}

				.text {
					color: #333;
					line-height: 1.6;
					margin-bottom: 24rpx;
				}

				.footer {
					display: flex;
					justify-content: space-between;
					color: #999;

					.actions {
						display: flex;
						gap: 32rpx;

						.action {
							display: flex;
							align-items: center;
							gap: 8rpx;
						}
					}
				}
			}
		}
	}

	// 写书评弹窗
	.reviews-popup {

		.popup-header {
			height: 45px;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
		}

		.popup-rate {
			display: flex;
			flex-direction: column;
			align-items: center;

			text {
				color: #f59a23;
			}
		}

		.popup-textarea {
			padding: 20rpx;

			textarea {
				width: 100%;
				background-color: #f2f2f2;
			}

		}

	}
</style>